<script setup>
import { inject, onBeforeUnmount, onMounted, ref, watch } from 'vue'
import { ElMessage } from 'element-plus'
import Card from '@/views/new-screen/components/card.vue'
import DrawEcharts from '@/components/draw-echarts.vue'
import { getCityDistribution, getBuiltYear } from '../api.js'

const props = defineProps({
  isExpanded: Boolean,
  activeName: String,
})

const cityDistributionChartRef = ref(null)

const getRadarChartOption = (list) => {
  const color = ['#00dfff', '#00aeff', '#00d7e9', '#41c1ff', '#91eef7', '#4ADFCB']
  const sData = list.filter(e => e.house_num > 0).map((e) => ({ value: +e.house_num, name: e.name }))
  return {
    // legend: {
    //   top: 'bottom'
    // },
    backgroundColor: {
      type: 'linear',
      x: 0,
      y: 0,
      x2: 1,
      y2: 0,
      colorStops: [{
          offset: 0, color: '#01153c21' // 0% 处的颜色
      }, {
          offset: 1, color: '#01153c89' // 100% 处的颜色
      }],
      global: false // 缺省为 false
    },
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    series: [
      {
        name: '城市分布',
        type: 'pie',
        radius: [30, 100],
        center: ['50%', '50%'],
        // roseType: 'area',
        roseType: 'radius',
        itemStyle: {
          borderRadius: 1
        },
        labelLine: {
          length: 10
        },
        label: {
          show: true,
          position: 'outside',
          color: 'white',
          formatter: '{b|{b}}{c} \n {per|{d}%}',
          rich: {
            b: {
              color: '#F5F4F4', //'#7C818E',
              fontSize: 14,
              fontWeight: 'bold',
              lineHeight: 33
            },
            per: {
              color: params => params.color, // 使用扇区颜色
            }
          }
        },
        data: sData.sort(function (a, b) {
          return a.value - b.value;
        }),
      }
    ]
  }
}

let buildingTimeList = ref([
  {
    label: '1949以前',
    value: 0,
    unit: '栋',
    max: 29055
  },
  {
    label: '49-69',
    value: 0,
    unit: '栋',
    max: 29055
  },
  {
    label: '69-79',
    value: 0,
    unit: '栋',
    max: 29055
  },
  {
    label: '79-89',
    value: 0,
    unit: '栋',
    max: 29055
  },
  {
    label: '89-99',
    value: 0,
    unit: '栋',
    max: 29055
  },
  {
    label: '99-09',
    value: 0,
    unit: '栋',
    max: 29055
  },
  {
    label: '2020以后',
    value: 0,
    unit: '栋',
    max: 29055
  },
])

const updateDataCityDistribution = (data) => {
  cityDistributionChartRef.value?.updateOption(getRadarChartOption(data.data))
}

const updateDataBuiltYear = (data) => {
  const max = Math.max(...data.houseNum)
  buildingTimeList.value = data.year.map((year, index) => {
    return {
      label: year,
      value: data.houseNum[index],
      unit: '栋',
      max: max
    }
  } )
}

const reqData = () => {
  Promise.all([
    getCityDistribution(),
    getBuiltYear(),
  ]).then((res) => {
    console.log('right res', res)
    if (res[0].success) {
      updateDataCityDistribution(res[0].data)
    }
    if (res[1].success) {
      updateDataBuiltYear(res[1].data)
    }
  })
}


onMounted(async () => {
  reqData()
})

onBeforeUnmount(() => {
})
</script>

<template>
  <div :class="['right', isExpanded ? 'active' : '']">
    <card name="城区分布" class="city-distribution">
      <div class="chart">
        <draw-echarts
          ref="cityDistributionChartRef"
          width="400"
          height="300"
        ></draw-echarts>
      </div>
    </card>
    <card name="建成年代" class="built-time">
      <div class="bar-list">
        <div class="bar-item" v-for="(item, i) in buildingTimeList" :key="i">
          <div class="bar-item-label">
            <span class="title">{{ item.label }}</span>
            <span>
              <span class="num">{{ item.value }}</span>
              <span class="unit">{{ item.unit }}</span>
            </span>
          </div>
          <div class="bar-item-bar">
            <div class="bar-item-bar-bg"></div>
            <div class="bar-item-bar-cover" :style="{ width: `${item.value / item.max * 100 }%` }">
            </div>
          </div>
        </div>
      </div>
    </card>
  </div>
</template>

<style scoped lang="scss">
.right {
  .title-icon {
    display: inline-flex;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    height: 61px;
    position: relative;
    bottom: 20px;
    // margin-top: 10px;
  }

  .right-close {
    height: 100%;
    position: absolute;
    right: 0;

    img {
      height: 16px;
      width: 16px;
      cursor: pointer;
    }
  }

  .area-title {
    display: flex;
    height: 21px;
    position: relative;

    &-left {
      height: 100%;
      width: 50%;
      background-size: 100% 100%;
      background-repeat: no-repeat;
      background-image: url('@/assets/imgs/tab_yq_d.png');
      margin-left: 10px;
      display: flex;
      justify-content: flex-start;
      padding-left: 20px;

      &-names {
        display: flex;
        justify-content: flex-start;
      }

      &-name {
        font-family: Source Han Sans SC;
        font-weight: bold;
        font-size: 16px;
        color: #00a6ff;
        background: linear-gradient(0deg, #8dc4ff 0%, #ffffff 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        cursor: pointer;
      }

      .is-active {
        font-weight: bold;
        font-size: 16px;
        color: #ffffff;
        background: linear-gradient(259deg, #fff4c8 0%, #ffc152 98.9990234375%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }
  }

  .city-distribution {
    height: 340px;
    margin-bottom: var(--card-margin-bottom);
  }

  .built-time {
    height:585px;
    margin-bottom: var(--card-margin-bottom);

    .bar-list {
      display: flex;
      flex-wrap: wrap;
      flex-direction: column;
      justify-content: space-between;
      .bar-item {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        margin-bottom: 1.2em;
        margin-top: 10px;
        .bar-item-label {
          width: 100%;
          display: flex;
          justify-content: space-between;
          color: #ffffff;
          font-size: 14px;
          .title {
            font-size: 13px;
          }
          .num {
            font-weight: bold;
          }
          .unit {
            font-size: 12px;
            color: #aaa;
            margin-left: 2px;
          }
        }
        .bar-item-bar {
          width: 100%;
          height: 1em;
          position: relative;
          margin-top: .4em;
          .bar-item-bar-bg {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 1em;
            background: #052c51;
            opacity: 0.2;
          }
          .bar-item-bar-cover {
            position: absolute;
            left: 0;
            top: 0;
            height: 1em;
            transition: width 0.5s ease-in-out;
            background: linear-gradient(90deg, #18487b 0%, #3cb6ef 100%);
          }
        }
      }
    }
  }
}
</style>
